<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2024-01-18 09:54:17
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2025-10-14 17:05:19
 * @FilePath: \vue-admin-template\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="normal-container" v-if="totalConfig">
        <div style="background-color: #fff;padding: 20px;margin-bottom: 20px;">
            <div class="title">
                库存管理
            </div>
            <div style="display:flex;align-items: center;margin-top: 40px;">
                <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/1.png" alt="" />
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">库存总金额</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">
                            {{ totalNumber.dataAll }}
                        </div>
                    </div>
                </div>
                <div
                    style="flex: 1;display: flex;align-items: center;border-left: 1px solid #F0ECEC;border-right: 1px solid #F0ECEC;justify-content: center;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/2.png" alt="" />
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">集团库存金额</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">
                            {{ totalNumber.dataGroup }}
                        </div>
                    </div>
                </div>
                <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
                    <div style="margin-right: 15px;">
                        <img src="@/assets/icon/3.png" alt="" />
                    </div>
                    <div>
                        <div style="font-size: 18px;margin-bottom: 10px;color: #8B8B98;">股东库存金额</div>
                        <div style="font-size: 30px;font-weight: 600;color: #000;">
                            {{ totalNumber.dataShareholder }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex;margin-top: 20px;gap: 20px;">
            <div style="background-color: #fff;padding: 20px;flex: 1;">
                <div class="title">
                    周转天数
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsHuo" style="width:100%;height: 400px;"></div>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;flex: 1;">
                <div class="title">
                    平均断货率
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsDuan" style="width:100%;height: 400px;"></div>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;flex: 1;">
                <div class="title">
                    平均动销率
                </div>
                <div style="margin-top: 15px;">
                    <div id="echartsPing" style="width:100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div style="background-color: #fff;padding: 20px;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div class="title">
                        库存整体情况分析
                    </div>
                    <div class="buttonMain">
                        <div @click="queryInventory(index)" :class="checkIndex == index ? 'buttonBoxYes' : 'buttonBox'"
                            v-for="(item, index) in list" :key="index">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <el-table v-if="checkIndex == 2" :header-cell-style="{
                        'text-align': 'center',
                        background: '#F6F7FB',
                        color: '#4B4B4B',
                        fontSize: '13px',
                    }" :cell-style="{ 'text-align': 'center' }" :data="inventoryList" style="width: 100%">
                        <el-table-column prop="shareholderUnit" label="股东名称"></el-table-column>
                        <el-table-column prop="grossAmount" label="库存总金额"></el-table-column>
                        <el-table-column prop="turnoverDays" label="当天周转天数"></el-table-column>
                        <el-table-column prop="varietiesNumber" label="在库品种数"></el-table-column>
                        <el-table-column prop="onSaleVarietiesNumber" label="在库品近30天动销品规数"></el-table-column>
                        <el-table-column prop="outOfStockRate" label="当前断货率"></el-table-column>
                        <el-table-column prop="outOfStockVarietiesNumber" label="当前断货品规"></el-table-column>
                        <el-table-column prop="strategicProductOutOfStockRate" label="战略品断货率"></el-table-column>
                        <el-table-column prop="strategicProductVarietiesNumber" label="战略品断货品规"></el-table-column>
                        <el-table-column prop="averageOutOfStockRate" label="30天平均断货率"></el-table-column>
                        <el-table-column prop="turnoverDays30" label="近30天周转天数"></el-table-column>
                    </el-table>
                    <div v-else>
                        <div style="display: flex;align-items: center;gap: 20px;">
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析1-库存金额.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">库存总金额</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.grossAmount }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析2-当前周转天数.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">当前周转天数</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.turnoverDays }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析3-在库品种数.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">在库品品种数</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.varietiesNumber }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;align-items: center;gap: 20px;margin-top: 10px;">
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析4-在库品近30天动销品规数.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">在库品近30天动销品规数</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.onSaleVarietiesNumber }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析5-当前断货率.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">当前断货率</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.outOfStockRate }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析6-当前断货品规.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">当前断货品规</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.outOfStockVarietiesNumber }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;align-items: center;gap: 20px;margin-top: 10px;">
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析7-战略品断货率.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">战略品断货率</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.strategicProductOutOfStockRate }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析8-战略品断货品规.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">战略品断货品规</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.strategicProductVarietiesNumber }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="background-color: #fff;"></div>
                        </div>
                        <div style="display: flex;align-items: center;gap: 20px;margin-top: 10px;">
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析9-30天平均断货率.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">30天平均断货率</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.averageOutOfStockRate }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="padding: 5px;">
                                <div style="display: flex;align-items: center;">
                                    <img style="margin-right: 5px;width: 30px;height: auto;"
                                        src="@/assets/icon/库存整体情况分析10-近30天周转天数.png" alt="">
                                    <div style="font-size: 14px;color: #181919;">近30天周转天数</div>
                                </div>
                                <div>
                                    <div style="font-size: 20px;color: #000;font-weight: 600;">
                                        {{ inventoryObject.turnoverDays30 }}
                                    </div>
                                </div>
                            </div>
                            <div class="fenxiBox" style="background-color: #fff;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: flex;margin-top: 20px;gap: 20px;">
            <div style="background-color: #fff;padding: 20px;flex: 1;">
                <div style="display: flex;justify-content: space-between;align-items: center;">
                    <div class="title">
                        效期商品分析
                    </div>
                    <div class="buttonMain">
                        <div @click="queryExpiryDate(index)"
                            :class="checkIndexFen == index ? 'buttonBoxYes' : 'buttonBox'"
                            v-for="(item, index) in listFen" :key="index">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <div style="display: flex;align-items: center;gap: 20px;">
                        <div
                            style="flex: 1;display: flex;justify-content: space-between;padding: 20px;background-color: #F4FBFB;border-radius: 5px;">
                            <div>
                                <div style="font-size: 14px;">效期品品规数</div>
                                <div style="font-size: 20px;color: #000;margin-top: 5px;font-weight: 600;">
                                    {{ expiryDateObject.varietiesNumber }}
                                </div>
                            </div>
                            <div>
                                <img style="width: 50px;height: auto;" src="@/assets/icon/效期商品分析1-效期品品规数.png" alt="">
                            </div>
                        </div>
                        <div
                            style="flex: 1;display: flex;justify-content: space-between;padding: 20px;background-color: #F4FBFB;border-radius: 5px;">
                            <div>
                                <div style="font-size: 14px;">效期品动销品规数</div>
                                <div style="font-size: 20px;color: #000;margin-top: 5px;font-weight: 600;">
                                    {{ expiryDateObject.onSaleVarietiesNumber }}
                                </div>
                            </div>
                            <div>
                                <img style="width: 50px;height: auto;" src="@/assets/icon/效期商品分析2-效期品动销品规数.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;gap: 20px;margin-top: 20px;">
                        <div
                            style="flex: 1;display: flex;justify-content: space-between;padding: 20px;background-color: #F4FBFB;border-radius: 5px;">
                            <div>
                                <div style="font-size: 14px;">效期品总金额</div>
                                <div style="font-size: 20px;color: #000;margin-top: 5px;font-weight: 600;">
                                    {{ expiryDateObject.grossAmount }}
                                </div>
                            </div>
                            <div>
                                <img style="width: 50px;height: auto;" src="@/assets/icon/效期商品分析3-效期品总金额.png" alt="">
                            </div>
                        </div>
                        <div
                            style="flex: 1;display: flex;justify-content: space-between;padding: 20px;background-color: #F4FBFB;border-radius: 5px;">
                            <div>
                                <div style="font-size: 14px;">效期品可销天数</div>
                                <div style="font-size: 20px;color: #000;margin-top: 5px;font-weight: 600;">
                                    {{ expiryDateObject.salableDays }}
                                </div>
                            </div>
                            <div>
                                <img style="width: 50px;height: auto;" src="@/assets/icon/效期商品分析4-效期品可销天数.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="background-color: #fff;padding: 20px;flex: 1;">
                <div class="title">
                    新品动销分析
                </div>
                <div style="margin-top: 15px;">
                    <div style="display: flex;align-items: center;gap: 20px;">
                        <div class="fenxiBox">
                            <div style="display: flex;align-items: center;">
                                <img style="margin-right: 5px;" src="@/assets/icon/新品动销分析1-本月新品品规数.png" alt="">
                                <div style="font-size: 14px;color: #181919;">本月新品品规数</div>
                            </div>
                            <div>
                                <div style="font-size: 20px;color: #000;font-weight: 600;">
                                    {{ totalConfig['新品动销分析'][0] }}
                                </div>
                            </div>
                        </div>
                        <div class="fenxiBox">
                            <div style="display: flex;align-items: center;">
                                <img style="margin-right: 5px;" src="@/assets/icon/新品动销分析2-新品总金额.png" alt="">
                                <div style="font-size: 14px;color: #181919;">新品总金额</div>
                            </div>
                            <div>
                                <div style="font-size: 20px;color: #000;font-weight: 600;">
                                    {{ totalConfig['新品动销分析'][1] }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;gap: 20px;margin-top: 10px;">
                        <div class="fenxiBox">
                            <div style="display: flex;align-items: center;">
                                <img style="margin-right: 5px;" src="@/assets/icon/新品动销分析3-近30天动销品规数.png" alt="">
                                <div style="font-size: 14px;color: #181919;">近30天动销品规数</div>
                            </div>
                            <div>
                                <div style="font-size: 20px;color: #000;font-weight: 600;">
                                    {{ totalConfig['新品动销分析'][2] }}
                                </div>
                            </div>
                        </div>
                        <div class="fenxiBox">
                            <div style="display: flex;align-items: center;">
                                <img style="margin-right: 5px;" src="@/assets/icon/新品动销分析4-近30天动销额.png" alt="">
                                <div style="font-size: 14px;color: #181919;">近30天动销额</div>
                            </div>
                            <div>
                                <div style="font-size: 20px;color: #000;font-weight: 600;">
                                    {{ totalConfig['新品动销分析'][3] }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="display: flex;align-items: center;gap: 20px;margin-top: 10px;">
                        <div class="fenxiBox">
                            <div style="display: flex;align-items: center;">
                                <img style="margin-right: 5px;" src="@/assets/icon/新品动销分析5-新品与同品数量比.png" alt="">
                                <div style="font-size: 14px;color: #181919;">新品与同品数据比</div>
                            </div>
                            <div>
                                <div style="font-size: 20px;color: #000;font-weight: 600;">
                                    {{ totalConfig['新品动销分析'][4] }}
                                </div>
                            </div>
                        </div>
                        <div class="fenxiBox">
                            <div style="display: flex;align-items: center;">
                                <img style="margin-right: 5px;" src="@/assets/icon/新品动销分析6-新品与同品销售比.png" alt="">
                                <div style="font-size: 14px;color: #181919;">新品与同品销售比</div>
                            </div>
                            <div>
                                <div style="font-size: 20px;color: #000;font-weight: 600;">
                                    {{ totalConfig['新品动销分析'][5] }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
var echarts = require('echarts');

export default {
    data() {
        return {
            totalConfig: null,

            myChart4: null,
            option4: null,
            myChart3: null,
            option3: null,
            myChart2: null,
            option2: null,
            formInline: {
                user: '',
                region: ''
            },
            myChart: null,
            option: null,
            currentChoose: '销售流向',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }],
            checkIndex: 0,
            list: [
                {
                    id: '0',
                    label: '总库存',
                },
                {
                    id: '1',
                    label: '集团库存',
                },
                {
                    id: '2',
                    label: '股东库存',
                },
            ],
            listFen: [
                {
                    id: '0',
                    label: '近3月内',
                },
                {
                    id: '1',
                    label: '3-6月',
                },
                {
                    id: '2',
                    label: '6-12月',
                },
            ],
            checkIndexFen: 0,

            iconList: [
                {
                    name: '在库品规数',
                    imgName: '动销管理1-在库品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'
                },
                {
                    name: '断货品规数',
                    imgName: '动销管理2-断货品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '动销品规数',
                    imgName: '动销管理3-动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '%'

                },
                {
                    name: '不动销品规数',
                    imgName: '动销管理4-不动销品规数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '90天不动销成本额',
                    imgName: '动销管理5-90天不动销成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '人'

                },
                {
                    name: '近40天动销率',
                    imgName: '动销管理6-近40天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: '元'

                },
                {
                    name: '近90天动销率',
                    imgName: '动销管理7-近90天动销率',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '断货损失',
                    imgName: '动销管理8-断货损失',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '90天以上积压成本额',
                    imgName: '动销管理9-90天以上积压成本额',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''

                },
                {
                    name: '库存周转天数',
                    imgName: '动销管理10-库存周转天数',
                    value: '1000.32',
                    huanValue: '0.1',
                    tongValue: '0.1',
                    type: ''
                },
            ],

            totalNumber: {},
            inventoryObject: {},
            inventoryList: [],
            expiryDateObject: {},
            turnoverObject: {},
            avgStockObject: {},
            avgMovableObject: {},
        }
    },
    mounted() {
        this.totalConfig = window.PLATFROM_CONFIG.inventoryManagement;

        this.queryDict()
        this.queryInventory(0)
        this.queryExpiryDate(0)
    },
    methods: {
        queryDict() {
            this.$baseRequest('/inventory/management/statisticalData', {}, {}, 'post').then(res => {
                console.log(res);
                this.totalNumber = res.data;
            });

            Promise.all([
                new Promise((resolve, reject) => {
                    this.$baseRequest('/inventory/management/turnoverDays', {}, {}, 'post').then(res => {
                        console.log(res);
                        this.turnoverObject = res.data;
                        resolve()
                    });
                }),
                new Promise((resolve, reject) => {
                    this.$baseRequest('/inventory/management/avgStockOutRate', {}, {}, 'post').then(res => {
                        console.log(res);
                        this.avgStockObject = res.data;
                        resolve()
                    });
                }),
                new Promise((resolve, reject) => {
                    this.$baseRequest('/inventory/management/avgMovablePinRate', {}, {}, 'post').then(res => {
                        console.log(res);
                        this.avgMovableObject = res.data;
                        resolve()
                    });
                }),
            ]).then(result => {
                this.$nextTick(res => {
                    this.getEcharts()
                })
            });
        },
        queryInventory(index) {
            this.checkIndex = index;
            this.$baseRequest('/inventory/management/overallSituationAnalysis', {
                type: this.list[this.checkIndex].id
            }, {}, 'post').then(res => {
                console.log(res);
                if (this.checkIndex == 2) this.inventoryList = res.data;
                else this.inventoryObject = res.data;
            });
        },
        queryExpiryDate(index) {
            this.checkIndexFen = index;
            this.$baseRequest('/inventory/management/expiryDateGoodsAnalyse', {
                expiryDateType: this.listFen[this.checkIndexFen].id
            }, {}, 'post').then(res => {
                console.log(res);
                this.expiryDateObject = res.data;
            });
        },
        freshEchats() {
            this.myChart.resize();
        },
        getEcharts() {
            this.myChart2 = echarts.init(document.getElementById('echartsHuo'));
            this.myChart3 = echarts.init(document.getElementById('echartsDuan'));
            this.myChart4 = echarts.init(document.getElementById('echartsPing'));

            this.option2 = {
                legend: {
                    data: ['数据名称'],
                    textStyle: {
                        align: 'right',
                    },
                    x: 'right',
                    y: '2%',
                    icon: 'rect',
                    itemHeight: 7, //修改icon图形大小
                },
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '18%',
                    left: '15%',
                    right: '3%',
                    bottom: '10%',
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00',
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 10,
                        },
                        boundaryGap: false,
                        data: this.turnoverObject.key,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#e3e3e3',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            formatter: '{value}',
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '数据名称',
                        type: 'line',
                        smooth: false, //是否平滑
                        lineStyle: { color: '#5EAEF8', width: 2 },
                        symbolSize: 10, // symbol大小
                        itemStyle: {
                            normal: {
                                color: '#5EAEF8', // 中心圆点及hover时提示框中数值前面的圆点的颜色
                                borderWidth: 20, // symbol边框
                                borderColor: '#5EAEF8' // symbol边框颜色
                            }
                        },
                        data: this.turnoverObject.data,
                    },
                ],
            };

            this.option3 = {
                legend: {
                    data: ['数据名称'],
                    textStyle: {
                        align: 'right',
                    },
                    x: 'right',
                    y: '2%',
                    icon: 'rect',
                    itemHeight: 7, //修改icon图形大小
                },
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '18%',
                    left: '10%',
                    right: '3%',
                    bottom: '10%',
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00',
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 10,
                        },
                        boundaryGap: false,
                        data: this.avgStockObject.key,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#e3e3e3',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            formatter: '{value}',
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '数据名称',
                        type: 'line',
                        smooth: false, //是否平滑
                        lineStyle: { color: '#F1D219', width: 2 },
                        symbolSize: 10, // symbol大小
                        itemStyle: {
                            normal: {
                                color: '#F1D219', // 中心圆点及hover时提示框中数值前面的圆点的颜色
                                borderWidth: 20, // symbol边框
                                borderColor: '#F1D219' // symbol边框颜色
                            }
                        },
                        data: this.avgStockObject.data,
                    },
                ],
            };

            this.option4 = {
                legend: {
                    data: ['数据名称'],
                    textStyle: {
                        align: 'right',
                    },
                    x: 'right',
                    y: '2%',
                    icon: 'rect',
                    itemHeight: 7, //修改icon图形大小
                },
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: '18%',
                    left: '10%',
                    right: '3%',
                    bottom: '10%',
                },
                xAxis: [
                    {
                        type: 'category',
                        axisLine: {
                            show: true,
                        },
                        splitArea: {
                            // show: true,
                            color: '#f00',
                            lineStyle: {
                                color: '#f00',
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            margin: 10,
                        },
                        boundaryGap: false,
                        data: this.avgMovableObject.key,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#e3e3e3',
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            margin: 20,
                            formatter: '{value}',
                        },
                        axisTick: {
                            show: false,
                        },
                    },
                ],
                series: [
                    {
                        name: '数据名称',
                        type: 'line',
                        smooth: false, //是否平滑
                        lineStyle: { color: '#EE7E5F', width: 2 },
                        symbolSize: 10, // symbol大小
                        itemStyle: {
                            normal: {
                                color: '#EE7E5F', // 中心圆点及hover时提示框中数值前面的圆点的颜色
                                borderWidth: 20, // symbol边框
                                borderColor: '#EE7E5F' // symbol边框颜色
                            }
                        },
                        data: this.avgMovableObject.data,
                    },
                ],
            };
            this.option2 && this.myChart2.setOption(this.option2, true);
            this.option3 && this.myChart3.setOption(this.option3, true);
            this.option4 && this.myChart4.setOption(this.option4, true);

            window.addEventListener("resize", this.freshEchats);
        },
    }
}
</script>
<style></style>
<style lang="scss" scoped>
.currentChooseYes {
    width: 80px;
    border: 1px solid #70DEDF;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: #E6FFFF;
    color: #70DDDF;
    cursor: pointer;
    font-size: 14px;


}

.currentChoose {
    width: 80px;
    border: 1px solid #E5E4E9;
    text-align: center;
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    font-size: 14px;

}

.yunyingBox {
    display: flex;
    align-items: center;
    // flex-wrap: wrap;
    gap: 3px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.yunying {

    flex-shrink: 0;
    width: 120px;
    height: 70px;

    /* 禁止收缩 */
    // width: 100px;

    border: 1px solid #96E7E8;
    padding: 5px;
    border-radius: 5px;
    background-color: #F2FFFF;
}

.title {
    font-size: 22px;
    letter-spacing: 1px;
}

.buttonBox {
    width: 95px;
    padding: 8px 0px;
    text-align: center;
    border: 1px solid #F3F4F5;
    color: #535353;
    font-size: 15px;
    cursor: pointer;


}

.buttonBoxYes {
    cursor: pointer;

    width: 95px;
    color: #70DDDF;
    font-size: 15px;
    background-color: #E6FFFF;

    padding: 8px 0px;
    text-align: center;
    border: 1px solid #96E7E8;
}

.buttonMain :first-child {
    border-radius: 7px 0px 0px 7px;
}

.buttonMain :last-child {
    border-radius: 0px 7px 7px 0px;
}

.buttonMain {
    background-color: #fff;
    // padding: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}

.baseBoxYes {
    background-color: #fff;
    color: #70DDDF;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
}

.baseBox {
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;


}

.fenxiBox {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background-color: #F4FBFB;
    border-radius: 5px;
    align-items: center;
}
</style>
